<template>
	<view class="content">
		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>
		
	<mescroll-body bottom="20%" height="40%" class="mescroll-body" ref="mescrollRef" :down="downOption"
		@init="mescrollInit" @up="upCallback" :up="upOption">
			<view class="head-box bg-white grid col-3">

			<view class="middle flex-direction" v-for="(top,i) in topList" :key="i">
				<view class="shuzi">
					{{top.num}}
					<view class="circle round" v-if="top.isshow">

					</view>
				</view>
				<view class="name">
					{{top.name}}
				</view>
			</view>

		</view>


		<!--  加入我的社团 -->
		<view class="join-box ">
			<view class="title">
				我加入的社团
			</view>
			
			<scroll-view scroll-x="true" >
				<view class="scroll-view-box flex">
					<view class="item middle flex-direction"  v-for="(item,i) in recommend" :key="i">
						<image class="img  round" :src="res+item.img" mode=""></image>
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.tag}}</text>
						<view class="btn-box round middle"@click="join(i)" :class="item.status?'join':'nojoin'">
							{{item.status?"已加入":"加入"}}
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		
		
		<!--  管理 -->
		<view class="manger-list ">
			<view class="item  flex align-center justify-between" v-for="(item,index) in manger" :key="index" @click="openFn">
				
				<view class="left basis-xl flex align-center">
					<image :src="res+item.icon" mode=""></image>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="right">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			
			
		</view>
		
		</mescroll-body>
		
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		components: {
			MescrollBody
		},
		data() {
			return {
				title: "我的",
				res: this.apiHost + "/static/otherApp/",
				recommend:[
					{
						name:"摄影社",
						tag:"科学人文丨38社员",
						status:true,
						img:"/static/shetuan/sheyin.png"
					},
					{
						name:"动漫社",
						tag:"影视娱乐丨45社员",
						status:true,
						img:"/static/shetuan/dongma.png"
					},
					{
						name:"足球社",
						tag:"体育运动丨884社员",
						status:true,
						img:"/static/shetuan/zhuqiu.png"
					}
					
				],
				upOption:{
					use:false,
				},
				topList: [
					{
						name: '关注',
						num: 24
					},
					{
						name: "粉丝",
						num: "124",
						isshow: true
					},
					{
						name: "帖子",
						num: 24,

					}

				],
				manger:[
					{
						name:"创建社团",
						icon:"/static/shetuan/create.png",
						
					},
					{
						name:"管理社团",
						icon:"/static/shetuan/manger.png"
					},
					{
						name:"活动管理",
						icon:"/static/shetuan/active.png"
					},
					{
						name:"隐私设置",
						icon:"/static/shetuan/set.png"
					}
					
					
				]

			}
		},
		methods:{
			openFn(){
				uni.showToast({
					title:"暂未开放",
					icon:"none"
				})
			}
		}


	}
</script>

<style scoped lang="scss">
	.content {
		$w: calc(100vw*(670/750));
		font-family: PingFang SC;
		
		.head{
			width: 100vw;
			height: calc(100vw*(80/750));
			padding: 0 45rpx;
			.left{
				height: inherit;
				
				.cuIcon-back{
					font-size: 45rpx;
				}
				.title{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #333333;
					margin-left: 20rpx;
					
				}
			}
		}
		
		.head-box {
			margin: 40rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			min-height: calc(100vw*(160/750));

			.shuzi {
				font-size: 40rpx;
				font-weight: 800;
				color: #333333;
				line-height: 62rpx;
				position: relative;

				.circle {
					position: absolute;
					width: calc(100vw*(28/750));
					height: calc(100vw*(28/750));
					background: #DD3131;
					top: calc(100vw*(-14/750));
					right: calc(100vw*(-28/750));
					border: 4rpx solid #FFFFFF;
				}
			}

			.name {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	
	    .join-box{
			.title{
				margin-left: 64rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 62px;
			}
			scroll-view{
			.scroll-view-box{
					width: 100vw;
					padding-left: 20rpx;
					.item{
						width: calc(100vw*(228/750));
						height: calc(100vw*(300/750));
						background: #FFFFFF;
					    margin-left: 20rpx;
						box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
						border-radius: 20rpx;
						.img {
							width: calc(100vw*(100/750));
							height: calc(100vw*(100/750));
						}
						
						.name {
							font-size: 24rpx;
							font-weight: 800;
							color: #333333;
							margin-top: 14rpx;
						}
						
						.desc {
							font-size: 18rpx;
							font-weight: 500;
							color: #999999;
							margin-top: 10rpx;
							text-align: center;
						}
						
						.btn-box {
							margin-top: 19rpx;
							
							min-width: calc(100vw*(150/750));
							height: calc(100vw*(50/750));
							font-size: 24rpx;
							font-weight: 500;
							
						}
						.nojoin{
							color: #FFFFFF;
							background: #1270E0;
						}
						.join{
							background-color: rgba(195,195,195,0.2);
							color: rgba(0,0,0,0.5);
						}
					}
				}
			}
		}
		
		.manger-list{
	
			margin: 20rpx 40rpx;
			.item{
				width: calc(100vw*(670/750));
				height: calc(100vw*(100/750));
				margin-top: 20rpx;
				padding: 0 40rpx 0 45rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				.left{
					image{
						width: calc(100vw*(40/750));
						height: calc(100vw*(40/750));
						margin-right: 20rpx;
					}
					.name{
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;
					}
				}
			}
		}
	
	}
</style>
